<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="12">
        <Chart :option="barOption"></Chart>
      </el-col>
      <el-col :span="12">
        <Chart :option="pieOption"></Chart>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <Chart
          :option="lineOption"
          :height="height"
        ></Chart>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// import * as echarts from 'echarts'
import Chart from '@/components/Chart'
import random from 'lodash/random'

export default {
  computed: {
    height() {
      return this._viewportToPixels('100vh') - 350 - 60 + 'px'
    }
  },
  components: {
    Chart
  },
  data() {
    return {
      barOption: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      pieOption: {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      lineOption: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }
    }
  },
  methods: {
    // 自己封装类似于 100vh 100vw
    _viewportToPixels(value) {
      var parts = value.match(/([0-9.]+)(vh|vw)/)
      var q = Number(parts[1])
      var side =
        window[['innerHeight', 'inerWidth'][['vh', 'vw'].indexOf(parts[2])]]
      return side * (q / 100)
    }
  },
  mounted() {},
  created() {
    setInterval(() => {
      this.lineOption.series[0].data = this.lineOption.series[0].data.map(() =>
        random(100)
      )
      // console.log(this.lineOption.series[0].data)
      this.lineOption = { ...this.lineOption }
    }, 2000)
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  min-width: 1200px;
}
</style>
